import 'package:flutter/material.dart';
import 'package:aweb5/base/BaseWidget.dart';
import 'package:aweb5/pages/OrderDetail.dart';

class Order extends BaseWidget {
  @override
  State<Order> createState() => OrderState();
}

class OrderState extends BaseWidgetState<Order> {
  PageController pageController = PageController();
  double x = 0;
  int currentIndex = 0;
  @override
  void initState() {
    super.initState();

    pageController.addListener(() {
      print(pageController.offset);
      x = pageController.offset / 5;
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    init(context);
    print(windowWidth);
    return SafeArea(
        child: Scaffold(
            appBar: appBarWithBack("我的订单"),
            body: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                scroll(),
                Container(
                  color: Colors.white,
                  height: 10,
                ),
                Transform.translate(
                  offset: Offset(x, 0),
                  child: Container(
                    color: Color(0xffed7876),
                    height:1,
                    width: windowWidth / 5,
                  ),
                ),
                Expanded(
                  child: page(),
                ),
              ],
            )));
  }

  Widget page() {
    return PageView.builder(
      itemBuilder: (con, ind) {
        return ListView.builder(
          itemBuilder: (con, ind) {
            return listItem();
          },
          itemCount: 5,
        );
      },
      itemCount: 5,
      controller: pageController,
      onPageChanged: (ind) {
        print(">>>>${ind}");
        currentIndex = ind;
        setState(() {});
      },
    );
  }

  Widget scroll() {
    return Column(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            InkWell(
              child: Container(
                color: Colors.white,
                width: windowWidth / 5,
                child: Text(
                  "全部",
                  style: text(0),
                  textAlign: TextAlign.center,
                ),
              ),
              onTap: () {
                currentIndex == 0;
                pageController.animateToPage(0,
                    duration: Duration(milliseconds: 200),
                    curve: Curves.fastOutSlowIn);
                setState(() {});
              },
            ),
            InkWell(
              child: Container(
                color: Colors.white,
                width: windowWidth / 5,
                child: Text(
                  "代付款",
                  style: text(1),
                  textAlign: TextAlign.center,
                ),
              ),
              onTap: () {
                currentIndex == 1;
                pageController.animateToPage(1,
                    duration: Duration(milliseconds: 200),
                    curve: Curves.fastOutSlowIn);
                setState(() {});
              },
            ),
            InkWell(
              child: Container(
                color: Colors.white,
                width: windowWidth / 5,
                child: Text(
                  "代发货",
                  style: text(2),
                  textAlign: TextAlign.center,
                ),
              ),
              onTap: () {
                currentIndex == 2;
                pageController.animateToPage(2,
                    duration: Duration(milliseconds: 200),
                    curve: Curves.fastOutSlowIn);
                setState(() {});
              },
            ),
            InkWell(
              child: Container(
                color: Colors.white,
                width: windowWidth / 5,
                child: Text(
                  "待收货",
                  style: text(3),
                  textAlign: TextAlign.center,
                ),
              ),
              onTap: () {
                currentIndex == 3;
//                  pageController.jumpToPage(page)
//                  pageController.jumpToPage(3);
                pageController.animateToPage(3,
                    duration: Duration(milliseconds: 200),
                    curve: Curves.fastOutSlowIn);
                setState(() {});
              },
            ),
            InkWell(
              child: Container(
                color: Colors.white,
                width: windowWidth / 5,
                child: Text(
                  "已完成",
                  style: text(4),
                  textAlign: TextAlign.center,
                ),
              ),
              onTap: () {
                currentIndex == 4;
                pageController.animateToPage(4,
                    duration: Duration(milliseconds: 200),
                    curve: Curves.fastOutSlowIn);
                setState(() {});
              },
            ),
          ],
        )
      ],
    );
  }

  TextStyle text(ind) {
    if (ind == currentIndex) {
      return TextStyle(color: Color(0xffed787d), fontSize: 12);
    } else {
      return TextStyle(color: Color(0xff888888), fontSize: 12);
    }
  }

  Widget listItem() {
    return Column(
      children: <Widget>[
        Container(
          height: 48,
          color: Colors.white,
          padding: EdgeInsets.only(left: 10, right: 10),
          alignment: Alignment.centerLeft,
          child: Row(
            children: <Widget>[
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    "王小   13978654560",
                    style: TextStyle(color: Color(0xff2d2d2d), fontSize: 12),
                  ),
                  Text(
                    "上海市徐汇区宜山路888号302室",
                    style: TextStyle(color: Color(0xff808080), fontSize: 10),
                    overflow: TextOverflow.ellipsis,
                    maxLines: 1,
                  ),
                ],
              ),
              Expanded(child: Text("")),
              Text(
                "待收货",
                style: TextStyle(color: Color(0xfffe5000), fontSize: 12),
              )
            ],
          ),
        ),
        Divider(
          height:1,
          color: Color(0xffe9e9e9),
        ),
        ListView.builder(
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          itemBuilder: (c, index) {
            return getItem(index);
          },
          itemCount: 5,
        )
      ],
    );
  }

  Widget getItem(index) {
    if (index < 4) {
      return Column(
        children: <Widget>[
          InkWell(
            child: Container(
              margin: EdgeInsets.only(left: 0, right: 0),
              height: 100,
              color: Colors.white,
              padding: EdgeInsets.only(left: 10, right: 10, top: 10),
              child: Row(
                children: <Widget>[
                  Image.asset(
                    "assets/banner1.png",
                    width: 80,
                    height: 80,
                    fit: BoxFit.fill,
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  Expanded(
                    child: Column(
                      //crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          "好喝的牛奶111111111111111111111111111111111111111111111",
                          style: TextStyle(color: Colors.black, fontSize: 14),
                          overflow: TextOverflow.ellipsis,
                          maxLines: 2,
                        ),
                        Expanded(child: Text("")),
                        Row(
                          children: <Widget>[
                            Column(
                              children: <Widget>[
                                Text(
                                  "规格",
                                  style: TextStyle(
                                      fontSize: 9, color: Color(0xff888888)),
                                ),
                                Text(
                                  "1",
                                  style: TextStyle(
                                      color: Color(0xffff0036), fontSize: 16),
                                )
                              ],
                            ),
                            Expanded(child: Text("")),
                            Text(
                              "x2",
                              style: TextStyle(
                                  color: Color(0xff2d2d2d), fontSize: 13),
                            )
                          ],
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ),
            onTap: () {
              navigatorState.push(new MaterialPageRoute(builder: (c) {
                return OrderDetail();
              }));
            },
          ),
          Container(
            padding: EdgeInsets.only(
              left: 10,
              right: 10,
            ),
            color: Colors.white,
            child: TextField(
              decoration: InputDecoration(
                  hintText: "输入备注内容",
                  hintStyle: TextStyle(color: Color(0xff888888), fontSize: 11),
                  border: InputBorder.none),
            ),
          ),
          Divider(
            height: 1,
            color: Color(0xffe9e9e9),
          )
        ],
      );
    } else {
      return Column(
        children: <Widget>[
          Container(
            alignment: Alignment.centerLeft,
            padding: EdgeInsets.only(left: 10),
            color: Colors.white,
            height: 39,
            child: Row(
              children: <Widget>[
                Text(
                  "2018-08-18 12:20:18",
                  style: TextStyle(color: Color(0xff888888), fontSize: 11),
                ),
                Expanded(child: Text("")),
                Text(
                  "共3件商品",
                  style: TextStyle(color: Color(0xff2d2d2d), fontSize: 12),
                ),
                SizedBox(
                  width: 5,
                ),
                Text(
                  "合计:￥766.0",
                  style: TextStyle(color: Color(0xffff0000), fontSize: 12),
                ),
                SizedBox(
                  width: 5,
                ),
                Text(
                  "（含运费￥0）",
                  style: TextStyle(color: Color(0xff2d2d2d), fontSize: 9),
                ),
              ],
            ),
          ),
          Divider(
            height:1,
            color: Color(0xffe9e9e9),
          ),
          Container(
            alignment: Alignment.centerLeft,
            padding: EdgeInsets.only(left: 10, right: 10),
            color: Colors.white,
            height: 45,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                InkWell(
                  child: Container(
                    decoration: BoxDecoration(
                        border: Border.all(color: Color(0xffb7b7b7)),
                        borderRadius: BorderRadius.circular(5)),
                    padding:
                        EdgeInsets.only(left: 15, right: 15, top: 2, bottom: 2),
                    child: Text(
                      "查看物流",
                      style: TextStyle(fontSize: 12, color: Color(0xffb7b7b7)),
                    ),
                  ),
                ),
                SizedBox(
                  width: 10,
                ),
                InkWell(
                  child: Container(
                    decoration: BoxDecoration(
                        border: Border.all(color: Color(0xfffe5000)),
                        borderRadius: BorderRadius.circular(5)),
                    padding:
                        EdgeInsets.only(left: 15, right: 15, top: 2, bottom: 2),
                    child: Text(
                      "确认收货",
                      style: TextStyle(fontSize: 12, color: Color(0xfffe5000)),
                    ),
                  ),
                )
              ],
            ),
          ),
          Divider(
            height: 10,
            color: Color(0xfff4f4f4),
          ),
        ],
      );
    }
  }
}
